<template>
  <div class="wrapper">
    <div class="article-header">
      <label class="search-wrapper">
        <input class="input-area" type="text" placeholder="输入文章标题" v-model="keyword">
        <button class="btns" @click="search">搜索</button>
      </label>
    </div>
    <div class="article-content">
      <div class="article-list">
        <template v-for="item in articles">
          <el-row :gutter="20" justify="center" align="center" class="article-item" :key="item.id">
          <el-col :span="12">
            <img :src="$baseUrl+item.image" :alt="item.title" @click="toDetail(item.id)">
          </el-col>
          <el-col :span="12">
            <el-row>
              <el-col :span="24">
                <h3 class="title" @click="toDetail(item.id)">{{item.title}}</h3>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <p class="desc">{{item.description}}</p>
              </el-col>
            </el-row>
            <el-row :gutter="40">
              <el-col :span="12" style="color:#9997a2;font-size:12px;">来源：{{item.origin}}</el-col>
              <el-col :span="12" style="color:#9997a2;font-size:12px;">发布时间：{{$dateFormat(item.createdAt)}}</el-col>
            </el-row>
          </el-col>
        </el-row>
        </template>
        <div class="pages">
          <el-pagination
            :hide-on-single-page="true"
            background
            :total="total"
            :current-page="currentPage"
            :page-size="pageSize"
            :pager-count="7"
            layout="prev, pager, next"
            @current-change="onCurrentChange"
            @prev-click="onPrev"
            @next-click="onNext"
          >
          </el-pagination>
        </div>
      </div>
      <div class="side">
        <h3>热门推荐</h3>
        <li v-for="item in recommend" :key="item.id" class="side-item">
          <router-link :to="`/art-detail?id=${item.id}`">{{item.title}}</router-link>
        </li>
      </div>
    </div>
  </div>
</template>
<script>
import dayjs from 'dayjs'
export default {
  name: 'News',
  data() {
    return {
      articles: null,
      recommend: null,
      total: null,
      currentPage: 1,
      pageSize: 10,
      keyword: ''
    }
  },

  computed: {
    date(d) {
      return dayjs(d).format('YYYY-MM-DD HH:mm:ss')
    }
  },

  created() {
    this.getArticleList(this.currentPage, this.pageSize)
    this.getRandArticle()
  },

  methods: {
    async getRandArticle() {
      const res = await this.$http.get('/users/randArticle?limit=6')
      this.recommend = res.data
    },
    onCurrentChange(page) {
      this.currentPage = page
      if(this.keyword) {
        this.search()
      } else {
        this.getArticleList(this.currentPage, this.pageSize)
      }
    },
    onPrev(page) {
      this.currentPage = page
      if(this.keyword) {
        this.search()
      } else {
        this.getArticleList(this.currentPage, this.pageSize)
      }
    },
    onNext(page) {
      this.currentPage = page
      if(this.keyword) {
        this.search()
      } else {
        this.getArticleList(this.currentPage, this.pageSize)
      }
    },
    async search() {
      this.currentPage = 1
      const res = await this.$http.get(`/users/findArticle?title=${this.keyword}&offset=${this.currentPage}&limit=${this.pageSize}`)
      this.articles = res.data.rows
      this.total = res.data.count
    },
    toDetail(id) {
      this.$router.push({
        name: 'art-detail',
        query: {
          id
        }
      })
    },
    async getArticleList(offset, limit) {
      const res = await this.$http.get(`/users/hotNews?offset=${offset}&limit=${limit}`)
      if(res.data.count !== 0) {
        this.articles = res.data.rows
        this.total = res.data.count
      } else {
        this.$message({
          message: '没有更多了',
          type: 'warn'
        })
      }
    }
  }
}
</script>
<style lang="less" scoped>
@import '../assets/style/news.less';
</style>